<template>
    <div class="component-picker-date">
        <input
            type="text"
            class="component-picker-date__input"
            :id='pickerId' 
            :placeholder="placeholder" 
            :value='value'>
        <slot></slot>
    </div>
</template>

<script>
    import '../libs/mobiscroll/css/mobiscroll.min.css'
    import '../libs/mobiscroll/js/mobiscroll.js'
    import '../libs/mobiscroll/js/mobiscroll.date.js'
    import '../libs/mobiscroll/js/i18n/mobiscroll.i18n.zh.js'
    import  { mapGetters, mapActions }  from 'vuex'
    import moment from 'moment'

    export default {
        props:{
            value:[Array,Object,String,Number,Boolean],
            text:[String,Number],
            pickerId:{
                type: String,
                default: 'picker-id'
            },
            placeholder:{
                type: String,
                default:'请选择'
            },
            minDate:{
                type: [String,Object],
                default:''
            },
            maxDate:{
                type: [String,Number],
                default:''
            }
        },
        data() {
            return {
                show_options:false,
                selectText:'',
                topPos:'',
                zIndex:1,
                scrollerInit:''
            }
        },
        computed:{
            ...mapGetters([
                'localInfo'
            ]),
            styleOptions(){
                let object = {}
                if(this.maxHeight){
                    object.maxHeight = `${this.maxHeight}px`
                }
                if(this.topPos){
                    object.top = `${this.topPos}px`
                }
                return object
            },
            documentClickBoolean(){
                return this.localInfo.documentClick
            },
            selectZIndex(){
                return this.localInfo.selectZIndex
            },
            zIndexStyle(){
                return {zIndex:this.zIndex}
            }
        },
        methods:{
            ...mapActions([
                'setDocumentClick',
                'setSelectZIndex',
                'setGoHome'
            ]),
        },
        mounted() {

            let now = new Date();
            let minDate

            if(!this.minDate){
                minDate = new Date(now.getFullYear(), now.getMonth(), now.getDate())
            }
            else{
                minDate = this.minDate.toDate()
            }
            console.log(!this.maxDate)
            let maxDate
            if(!this.maxDate){
                maxDate = new Date(now.getFullYear() + 3, now.getMonth(), now.getDate());
            }
            else{
                maxDate = moment().add(this.maxDate, 'days').toDate()
            }
            console.log(maxDate)
            let self = this
            this.$nextTick(()=> {
                this.scrollerInit = mobiscroll.date(`#${this.pickerId}`, {
                    lang: 'zh',
                    display: 'bottom',
                    min:minDate,
                    max:maxDate,
                    circular:false,
                    width:[250,250,250],
                    onSet(event, inst) {
                        let value = event.valueText
                        self.$emit('input',value)
                        self.$emit('done')
                    },
                    onBeforeShow(event, inst) {
                        self.setGoHome(false)
                    },
                    onBeforeClose(event, inst){
                        self.setGoHome(true)
                    }
                })
            })
        },
        destroyed(){
            this.scrollerInit.destroy()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    .component-picker-date{
        display: flex;
        width: 100%;
        position: relative;
        align-items:center;
        box-sizing:border-box;
    }
</style>


